<template>
    <div>
            <Row type="flex" justify="start">
                <i-col>
                    <Button icon="md-download" class="ivu-btn-add" @click="addInfo">导出</Button>
                </i-col>
            </Row>
            <Table ref='table' style="margin-top: 10px" :loading="loading" border :columns="columns"
                   :data="infos" width="100%" :height="tableHeight" highlight-row stripe size="small"></Table>
            <Row type="flex" justify="end" >
                <i-col>
                    <Page :total="pagedata.total" :current="pagedata.currentPage" :page-size="pagedata.pageSize"
                          @on-page-size-change="pageSizeChange" @on-change="pageChange" :page-size-opts="pageSizeArray" show-total show-sizer show-elevator />
                </i-col>
            </Row>
            <Modal v-model="modal1" width="800" :mask-closable="false" title="按频次上报排查记录" :styles="{top: '20px'}">
                <Form ref="formCustom" :model="formData" :rules="ruleCustom" label-position="top">
                    <div style="min-height: 300px; overflow-y: auto; overflow-x: hidden ">
                        <Row>
                            <i-col>
                                <FormItem label="排查对象：" prop="orgName">
                                    <Input v-model="formData.orgName" readonly/>
                                </FormItem>
                            </i-col>
                        </Row>
                        <Row>
                            <i-col>
                                <FormItem label="排查人所属机构：" prop="projectname">
                                    <Input v-model="formData.projectname" readonly/>
                                </FormItem>
                            </i-col>
                        </Row>
                        <Row :gutter="16">
                            <i-col span="12">
                                <FormItem label="排查人姓名：" prop="userName">
                                    <Input v-model="formData.userName" readonly/>
                                </FormItem>
                            </i-col>
                            <i-col span="12">
                                <FormItem label="排查人角色：" prop="roleName">
                                    <Input v-model="formData.roleName" readonly/>
                                </FormItem>
                            </i-col>
                        </Row>
                        <Row :gutter="16">
                            <i-col span="12">
                                <FormItem label="排查开始时间：" prop="startTimeStr">
                                    <Input v-model="formData.startTimeStr" readonly/>
                                </FormItem>
                            </i-col>
                            <i-col span="12">
                                <FormItem label="排查截止时间：" prop="endTimeStr">
                                    <Input v-model="formData.endTimeStr" readonly/>
                                </FormItem>
                            </i-col>
                        </Row>
                        <Row :gutter="16">
                            <i-col span="12">
                                <FormItem label="排查上报时间：" prop="reportTimeStr">
                                    <Input v-model="formData.reportTimeStr" readonly/>
                                </FormItem>
                            </i-col>
                            <i-col span="12">
                                <FormItem label="排查周期：" prop="period">
                                    <Input v-model="formData.period" readonly/>
                                </FormItem>
                            </i-col>
                        </Row>
                        <Row>
                            <i-col >
                                <FormItem label="排查结果描述：" prop="desn">
                                    <Input v-model="formData.desn" type="textarea"/>
                                </FormItem>
                            </i-col>
                        </Row>
                        <Divider orientation="left">项目部定制隐患条目</Divider>
                    </div>
                </Form>
            </Modal>
    </div>
</template>

<script>

    import {Api} from '../../../api'

    export default {
        name: "apsgCheckrecordList",
        data(){
            return {
                loading: false,
                tableHeight: 0,
                columns: [
                    {
                        type: 'index',
                        title: '序号',
                        width: 80,
                        align: 'center',
                        fixed: 'left',
                    },
                    {
                        title: '排查人员',
                        align: 'center',
                        key: 'userName',
                        minWidth: 100,
                        render:(h,params)=>{
                            return h('div',[
                                h('span',params.row.userName || '--')
                            ]);
                        }
                    },
                    {
                        title: '排查人岗位',
                        align: 'center',
                        key: 'flowNo',
                        width: 180,
                        render:(h,params)=>{
                            return h('div',[
                                h('span',params.row.flowNo || '--')
                            ]);
                        }
                    },
                    {
                        title: '排查开始时间',
                        align: 'center',
                        key: 'startTimeStr',
                        width: 180,
                        render:(h,params)=>{
                            return h('div',[
                                h('span',params.row.startTimeStr || '--')
                            ]);
                        }
                    },
                    {
                        title: '排查截止时间',
                        align: 'center',
                        key: 'endTimeStr',
                        width: 180,
                        render:(h,params)=>{
                            return h('div',[
                                h('span',params.row.endTimeStr || '--')
                            ]);
                        }
                    },
                    {
                        title: '排查上报时间',
                        align: 'center',
                        key: 'flowNo',
                        width: 180,
                        render:(h,params)=>{
                            return h('div',[
                                h('span',params.row.flowNo || '--')
                            ]);
                        }
                    },
                    {
                        title: '排查周期',
                        align: 'center',
                        key: 'flowNo',
                        width: 100,
                        render:(h,params)=>{
                            return h('div',[
                                h('span',params.row.flowNo || '--')
                            ]);
                        }
                    },
                    {
                        title: '排查状态',
                        align: 'center',
                        key: 'flowNo',
                        width: 100,
                        render:(h,params)=>{
                            return h('div',[
                                h('span',params.row.flowNo || '--')
                            ]);
                        }
                    },
                    {
                        title: '排查项目（分）部',
                        align: 'center',
                        key: 'flowNo',
                        width: 180,
                        render:(h,params)=>{
                            return h('div',[
                                h('span',params.row.flowNo || '--')
                            ]);
                        }
                    },
                    {
                        title: '排查人所属机构',
                        align: 'center',
                        key: 'flowNo',
                        width: 180,
                        render:(h,params)=>{
                            return h('div',[
                                h('span',params.row.flowNo || '--')
                            ]);
                        }
                    },
                    {
                        title: '排查结果描述',
                        align: 'center',
                        key: 'flowNo',
                        width: 180,
                        render:(h,params)=>{
                            return h('div',[
                                h('span',params.row.flowNo || '--')
                            ]);
                        }
                    },
                    {
                        title: '操作',
                        align: 'center',
                        width: 180,
                        fixed: 'right',
                        render:(h,params)=>{
                            return h('div',[
                                h('A', {
                                    props: {
                                        type: 'primary',
                                        size: 'small'
                                    },
                                    style: {
                                        fontSize: '14px'
                                    },
                                    on: {
                                        click: () => {
                                            this.modal1 = true;
                                            this.formData = params.row;
                                            this.formData.reportTimeStr = this.formatDate(new Date(), 'yyyy-MM-dd hh:mm:ss');
                                        }
                                    }
                                }, '排查并上报'),
                            ]);
                        }
                    },

                ],
                infos: [],
                pagedata: {
                    total: 0,
                    pageSize: 10,
                    currentPage: 1,
                    total2: 0,
                    pageSize2: 10,
                    currentPage2: 1
                },
                pageSizeArray: [10, 20, 50],
                modal1: false,
                formData: {},
                ruleCustom: {
                    desn: [
                        {
                            required: true,
                            message: '  ',
                            trigger: 'blur,change'
                        }
                    ]
                }
            }
        },
        mounted(){
            this.tableHeight = window.innerHeight - 215;
            this.query();
        },
        methods: {
            query(){
                this.loading = true;
                let data = {
                    startPage: this.pagedata.currentPage,
                    pageSize: this.pagedata.pageSize,
                }
                this.$http.get(Api.apsgCheckrecord, {
                    params: data
                }).then(function(res){
                    this.infos = res.data.data;
                    this.pagedata.total = res.data.totalSize;
                    this.loading = false;
                }, function(res){
                    this.$Message.error('请求失败');
                });

            },
            pageSizeChange(pageSize){
                this.pagedata.pageSize = pageSize;
                this.query();
            },
            pageChange(pageNum){
                this.pagedata.currentPage = pageNum;
                this.query();
            },
            formatDate(date, fmt) {
                if (typeof date == 'string') {
                    return date;
                }
                if (!fmt) fmt = "yyyy-MM-dd hh:mm:ss";
                if (!date || date == null) return null;
                let o = {
                    'M+': date.getMonth() + 1, // 月份
                    'd+': date.getDate(), // 日
                    'h+': date.getHours(), // 小时
                    'm+': date.getMinutes(), // 分
                    's+': date.getSeconds(), // 秒
                    'q+': Math.floor((date.getMonth() + 3) / 3), // 季度
                    'S': date.getMilliseconds() // 毫秒
                }
                if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length))
                for (let k in o) {
                    if (new RegExp('(' + k + ')').test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? (o[k]) : (('00' + o[k]).substr(('' + o[k]).length)))
                }
                return fmt
            },
        }
    }
</script>

<style scoped>

</style>
